<template>
  <view class="page">
    <Navbar title="意见反馈" occupy>
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <u-textarea
      v-model="editForm.leaveWordContent"
      height="140"
      border="none"
      color="#fff"
      placeholder="请输入您需要反馈的内容..."
      :placeholder-style="{
        color: '#909090',
      }"
    />
    <u-line color="#D9D9D9" margin="30rpx 0" />
    <u-upload
      multiple
      width="214rpx"
      height="162rpx"
      :max-count="6"
      upload-icon="plus"
      upload-icon-color="#fff"
      :file-list="fileList"
      @after-read="afterRead"
      @delete="deletePic"
    />
    <Sub-title
      label="联系方式"
      color="#24DE73"
      size="28rpx"
      :bold="false"
      border
      padding="30rpx 0"
    >
      <u-input
        slot="right"
        v-model="editForm.contactInformation"
        border="none"
        color="#fff"
        placeholder="点击填写"
        input-align="right"
        font-size="28rpx"
      />
    </Sub-title>
    <u-text :text="tips" color="#979797" size="24rpx" margin="30rpx 0" />
    <view class="f f-ac f-jc mt-60 bg-green btn" @click="handleSubmit"> 提交 </view>
  </view>
</template>

<script>
import { commonUpload, deleteFile } from "@/request/common.js";
import { postFeedback } from "@/request/myApi.js";
export default {
  data() {
    return {
      fileList: [], // 图片
      editForm: {
        leaveWordContent: "", // 反馈内容
        contactInformation: "", // 联系方式
        imgUrl: "", // 图片地址
      },
      tips: "请留下您的联系方式(微信号/QQ/邮箱)，反馈的相关问题我们会第一时间为您解答。",
    };
  },

  mounted() {},

  methods: {
    // 提交反馈
    handleSubmit() {
      if (this.editForm.leaveWordContent == "") {
        uni.showToast({
          title: "请输入反馈内容",
          icon: "none",
        });
        return;
      }
      if (this.editForm.contactInformation == "") {
        uni.showToast({
          title: "请输入联系方式",
          icon: "none",
        });
        return;
      }
      // if (/^1[3456789]\d{9}$/.test(this.editForm.contactInformation) == false) {
      //   uni.showToast({
      //     title: "请输入正确的联系方式",
      //     icon: "none",
      //   });
      //   return;
      // }
      this.editForm.imgUrl = this.fileList.map((i) => i.url).join(",");
      postFeedback(this.editForm).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: "提交成功",
            icon: "success",
            mask: true,
            success: () => {
              setTimeout(() => {
                uni.navigateBack({ delta: 1 });
              }, 1500);
            },
          });
        }
      });
    },
    // 删除凭证图片
    deletePic(e) {
      if (e.file.status == "success") {
        deleteFile({ path: e.file.url }).then((res) => {
          if (res.code == 200) {
            this.fileList.splice(e.index, 1);
          } else {
            uni.showToast({
              title: res.msg || "服务器错误",
              icon: "none",
              mask: true,
            });
          }
        });
      } else {
        this.fileList.splice(e.index, 1);
      }
    },
    // 新增图片
    async afterRead(e) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let list = [].concat(e.file);
      let len = this.fileList.length;
      list.map((item) => {
        this.fileList.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < list.length; i++) {
        const result = await this.uploadFilePromise(list[i].url);
        let item = this.fileList[len];
        this.fileList.splice(
          len,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        len++;
      }
    },
    // 上传凭证图片
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        commonUpload(url).then((res) => {
          if (res.code == 200) {
            setTimeout(() => {
              resolve(res.fileName);
            }, 1000);
          } else {
            uni.showToast({
              title: res.msg || "服务器错误",
              icon: "none",
              mask: true,
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  position: relative;
  padding: 30rpx;
  .btn {
    color: #fff;
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    border-radius: 20rpx;
    &:active {
      background-color: #25ca6a;
    }
  }
}
::v-deep .u-textarea {
  background-color: transparent !important;
  .u-textarea__field {
    color: #fff;
  }
}
::v-deep .u-upload__button {
  background-color: #8b8b8b4d !important;
  border-radius: 10rpx;
}
</style>
